<template>
  <div class='BasicSetting'>
    <div class="form-content">
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-position="top"
      >
        <!-- 表单名称 -->
        <el-form-item
            label="审批名称"
            prop="flowName"
            required
        >
          <el-input
              v-model="form.flowName"
              placeholder="请输入"
          />
        </el-form-item>
        <el-form-item
            label="选择分组"
            prop="flowGroup"
            required
        >
          <el-select
              v-model="form.flowGroup"
              placeholder="请选择"
              class="w-full"
          >
            <el-option :key="index" v-for="(group,index) in flowGroupList" :label="group.groupName" :value="group.ID+''"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="flowImg" label="选择图标">
          <IconsDialog v-model="form.flowImg"/>
        </el-form-item>
        <el-form-item prop="flowRemark" label="表单说明">
          <el-input
              v-model="form.flowRemark"
              type="textarea"
              :rows="4"
              placeholder="请输入"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup name='BasicSetting'>
import IconsDialog from "@/views/flow/createDirectly/basicSetting/IconsDialog.vue";
import request from "@/utils/request.js";
const props = defineProps({
  tabName: {
    type: String,
    default: 'basicSetting'
  },
  conf: {
    type: Object,
    default: undefined
  }
})
const form = ref({
  multiPositionEnable: false,
  withdraw: 1,
  flowName: '',
  flowImg: '',
  flowGroup: undefined,
  flowRemark: undefined,
})
const rules = {
  flowName: [
    {
      required: true,
      message: '请输入表单名称',
      trigger: 'blur'
    },
    {
      max: 50,
      message: '不能超过50个字符',
      trigger: 'blur'
    }
  ],
  flowGroup: [
    {
      required: true,
      message: '请选择所在分组',
      trigger: 'change'
    }
  ]
}
const {proxy} = getCurrentInstance()
const formRef = ref(undefined)
const flowGroupList = ref(undefined)
// 给父级页面提供得获取本页数据得方法
const getData = () => {
  return new Promise((resolve,
                      reject) => {
    proxy.$refs.formRef.validate(valid => {
      if (!valid) {
        reject({target: props.tabName})
        return
      }
      resolve({
        formData: form.value,
        target: props.tabName
      })  // TODO 提交表单
    })
  })
}
onMounted(() => {
  if (props.conf) {
    form.value = JSON.parse(JSON.stringify(props.conf))
  }
  request({
    url: '/flow/group/list',
    method: 'get'
  })
      .then(res => {
        flowGroupList.value = res.rows
      })
})
defineExpose({getData})
</script>
<style scoped lang='scss'>
.BasicSetting {
  .form-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    background: white;
    border-radius: 4px;

    :deep(.el-form-item__label) {
      padding-bottom: 0;
    }

    .permission-link {
      font-size: 14px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
